<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	  <meta http-equiv="X-UA-Compatible" content="ie=edge">
	  <title>Document</title>
	</head>
	<body>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
		<script>
			// Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理
			// 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数
			//promise的缺点：无法中途取消；不设置回调，内部错误不会反应到外部；无法得知进展到那一阶段

			// const promise = new Promise(function(resolve,reject){
			// 	if(/*异步操作成功*/){
			// 		resolve(value);
			// 	}else{
			// 		reject(error);
			// 	}
			// });

			// Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数
			// promise.then(function(value){
			// 	// success
			// },fucntion(error){
			// 	// failure
			// })

			// function timeout(ms){
			// 	return new Promise((resolve,reject) => {
			// 		setTimeout(resolve,ms,'done');
			// 	});
			// }
			// timeout(100).then((value) => {
			// 	console.log(value);
			// })

			// let promise = new Promise(function(resolve,reject){
			// 	console.log('Promise');
			// 	resolve();
			// });
			// promise.then(function(){
			// 	console.log('resolve');
			// });
			// console.log('Hi');
			// Promise新建执行，输出Promise,当前脚本所有同步任务执行完才会执行,最后输出resolve
			// Promise
			// Hi!
			// resolved


			// function loadImageAsync(url){
			// 	return new Promise(function(resolve,reject){
			// 		const image = new Image();
			// 		image.onload = function(){
			// 			resolve(image);
			// 		};
			// 		image.onerror = function(){
			// 			reject(new Error('Could not load image at '+url));
			// 		};
			// 		image.src = url;
			// 	});
			// }

			// const getJSON = function(url){
			// 	const promise = new Promise(function(resolve,reject){
			// 		const handler = function(){
			// 			if(this.readyState !== 4){
			// 				return;
			// 			}
			// 			if(this.status === 200){
			// 				resolve(this.response);
			// 			}else{
			// 				reject(new Error(this.statusText));
			// 			}
			// 		};
			// 		const client = new XMLHttpRequest();
			// 		client.open('GET',url);
			// 		client.onreadystatechange = handler;
			// 		client.responseType = 'json';
			// 		client.setRequestHeader('Accept','application/json');
			// 		client.send();
			// 	});
			// 	return promise;
			// };
			// getJSON('/posts.json').then(function(json){
			// 	console.log('Contents:'+json);
			// },function(error){
			// 	console.error('出错了'，error);
			// })

			// p1和p2都是 Promise 的实例，但是p2的resolve方法将p1作为参数，即一个异步操作的结果是返回另一个异步操作
			// const p1 = new Promise(function(resolve,reject){
			// 	console.log('1');
			// });
			// const p2 = new Promise(function(resolve,reject){
			// 	resolve((p1));
			// })

			// const p1 = new Promise(function (resolve, reject) {
			// 	setTimeout(() => reject(new Error('fail')), 3000)
			// })
			// const p2 = new Promise(function (resolve, reject) {
			//   setTimeout(() => resolve(p1), 1000)
			// })
			// p2
			//   .then(result => console.log(result))
			//   .catch(error => console.log(error))
			  //Error: fail



			// new Promise((resolve, reject) => {
			//     resolve(1);
			//     console.log(2);
			// }).then(r => {
			//   console.log(r);
			// });
			//2
			//1


			// new Promise((resolve, reject) => {
			//     return resolve(1);
			//     // 后面的语句不会执行
			//     console.log(2);
			// })

			// then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法
			// getJSON('/posts.json').then(function(json){
			// 	return json.post;
			// }).then(function(post){
			// 	console.log('1');
			// })


			// 第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用funcA，如果状态变为rejected，就调用funcB
			// getJSON('/post/1.json').then(function(post){
			// 	return getJSON(post.commentURL);			}).then(function funcA(comments){
			// 		console.log('resolved:',comments)
			// 	},function funcB(err){
			// 		console.log('rejected:',err);
			// })


			getJSON('/post/1.json').then(post => getJSON(post.commentURL)).then(comments => console.log('resolved:',comments),err => console.log('rejected:',err));


		</script>
	</body>
</html>